<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <div class="top">
      <span
        id="zuojiantou"
        @click="back"
        class="iconfont icon-arrow-left-copy-copy"
      ></span>
      <span class="pay">编辑资料</span>
    </div>

    <div class="con">
      <div class="img">
        <input
          type="file"
          id="upload"
          style="display: none"
          accept="image/gif,image/jpeg,image/png,image/jpg"
          @change="freshImg"
        />
        <div class="border" @click="changeImg">
          点击上传头像
          <img :src="imgsrc" class="imgDiv" />
        </div>
      </div>
      <p>
        昵称
        <span @click="changeName" ref="names"
          >{{ $store.state.order.user.name
          }}<i class="iconfont icon-arrow-left"></i
        ></span>
      </p>
      <p>
        联系方式
        <span @click="changePhone" ref="phones"
          >{{ $store.state.order.user.title
          }}<i class="iconfont icon-arrow-left"></i
        ></span>
      </p>
      <div><button class="btn" @click="btn">保存修改</button></div>
    </div>
    <!-- 修改姓名弹窗 -->
    <div class="alert" v-if="flag">
      <p class="tit">修改姓名</p>
      <p class="shuru">
        <input type="text" ref="inpV" placeholder="请输入您要修改的姓名" />
      </p>
    </div>
    <!-- 修改电话弹窗 -->
    <div class="alerts" v-if="show">
      <p class="tit">修改联系方式</p>
      <p class="shuru">
        <input type="text" ref="inpP" placeholder="请输入您要修改的号码" />
      </p>
    </div>
    <div class="meng" v-if="flags" @click="none"></div>
    <div class="meng" v-if="shows" @click="nones"></div>
    <!-- 保存成功弹窗 -->
    <transition name="xiao">
      <div class="save" v-if="save">
        <p class="yes">
          <span class="iconfont icon-duigouxuanxiang-01"></span>
        </p>
        <p class="end">保存成功</p>
      </div>
    </transition>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as api from "../../api/home";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      flag: false,
      flags: false,
      show: false,
      shows: false,
      newPhone: "",
      newName: "",
      save: false,
      userId: "",
      imgsrc: this.$store.state.order.user.img, //用户没有上传图片的默认头像
      headTip: "点击上传头像",
      newImg: "",
      imgS:''
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.newPhone = this.$store.state.order.user.title;
    this.newName = this.$store.state.order.user.name;
    api.userData().then((res) => {
      console.log(111111111111111, res.data.code);
    });
    console.log("user", this.$store.state.order.user);
  },
  // Vue方法定义
  methods: {
    changeImg() {
      document.getElementById("upload").click();
      console.log(1010101010, this.imgsrc);
    },
    freshImg(e) {
      let _this = this;
      _this.imgObj = e.target.files["0"]; //得到上传的第一个文件
      let fr = new FileReader(); //异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      fr.onload = function () {
        //在读取操作完成时触发
        _this.imgsrc = fr.result; // 图片文件赋值给图片标签路径
      };
      fr.readAsDataURL(_this.imgObj); //将读取到的文件编码成Data URL
      this.newImg = "http://192.168.1.128:8888/img/" + _this.imgObj.name;
      console.log(this.newImg);
      this.imgS = _this.imgsrc
      console.log(222222222, this.imgS);
      console.log(222222222, _this.imgsrc);
    },
    back() {
      this.$router.push("/my");
    },
    changeName() {
      this.flag = true;
      this.flags = true;
    },
    changePhone() {
      this.show = true;
      this.shows = true;
    },
    none() {
      // this.show = false;
      this.flag = false;
      this.flags = false;
      this.newName = this.$refs.inpV.value;
      this.$refs.names.innerHTML = this.newName;
      this.$refs.phones.innerHTML = this.newPhone;
      console.log("input框的内容", this.newName);
    },
    nones() {
      this.show = false;
      this.shows = false;
      this.newPhone = this.$refs.inpP.value;
      this.$refs.names.innerHTML = this.newName;
      this.$refs.phones.innerHTML = this.newPhone;
      console.log("input框的内容", this.newName);
    },
    btn() {
      api
        .findUser({ userName: this.$store.state.order.user.name })
        .then((res) => {
          this.userId = res.data.userId;
          console.log('呼吁烦烦烦方法',res);
        })
        .catch((err) => {
          console.log("失败", err);
        });
      setTimeout(() => {
        let userObj = {
          userId: this.userId,
          userName: this.newName,
          phone: this.newPhone,
          userImg: this.newImg,
        };
        console.log(userObj);
        api
          .ChangeUser(userObj)
          .then((res) => {
            console.log('userObj',res);
          })
          .catch((err) => {
            console.log("失败", err);
          });
        this.$store.dispatch("order/addCount", {
          name: this.newName,
          title: this.newPhone,
          img: this.newImg,
        });
        console.log('lalalalal',this.$store.state.order.user.img);
      }, 400);
      this.save = true;
      setTimeout(() => {
        this.save = false;
      }, 1500);
    },
  },
};
</script>

<style scoped>
@import url("../../../assets/font/iconfont.css");

/* @import url(''); 引入css类 */
.box {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgb(246, 246, 246);
}
.top {
  width: 100%;
  height: 55px;
  display: flex;
  line-height: 55px;
  border-bottom: 1px solid #ccc;
}
#zuojiantou {
  font-size: 24px;
  font-weight: 600;
  color: #c3c3c3;
  padding-left: 5px;
}
.pay {
  padding-left: 35%;
  font-size: 18px;
  font-weight: 600;
}
.con {
  margin-top: 30px;
  width: 100%;
  height: calc(100vh - 165px);
}
.img {
  width: 100%;
  text-align: center;
}
.con h1 {
  text-align: center;
}
.head-img {
  text-align: center;
  margin-bottom: 0.2rem;
}
.border {
  /* display: inline-block; */
  width: 5rem;
  height: 5rem;
  /* border-radius: 50%; */
  /* border: 1px solid #c3c3c3; */
  overflow: hidden;
  line-height: 5rem;
  text-align: center;
  position: relative;
}
.imgDiv {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  /* z-index: -1; */
}
.con p {
  width: 90%;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}
.con span {
  float: right;
  position: absolute;
  right: 20px;
  color: rgb(150, 150, 150);
}
.con div {
  width: 80%;
  margin: 0 auto;
}
.btn {
  width: 80%;
  position: absolute;
  bottom: 150px;
  height: 50px;
  /* left: 10%; */
  border: none;
  background: orange;
  color: white;
  font-size: 16px;
}
.alert {
  width: 80%;
  /* margin: 0 auto; */
  height: 180px;
  background: white;
  position: absolute;
  top: 25%;
  left: 10%;
  right: 10%;
  z-index: 999;
}
.alerts {
  width: 80%;
  /* margin: 0 auto; */
  height: 180px;
  background: white;
  position: absolute;
  top: 25%;
  left: 10%;
  right: 10%;
  z-index: 999;
}
.meng {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(103, 103, 103, 0.6);
}
.tit {
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 70px;
  color: rgb(238, 103, 85);
  font-size: 16px;
}
.shuru input {
  width: 80%;
  margin-left: 10%;
  height: 30px;
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
}
/* 保存弹窗 */
.save {
  width: 190px;
  height: 190px;
  background: rgba(68, 68, 68, 0.7);
  position: absolute;
  top: 30%;
  left: 26%;
  color: white;
}
.yes {
  text-align: center;
  margin-top: 30px;
}
.yes span {
  font-size: 40px;
  font-weight: 800;
}
.end {
  margin-top: 30px;
  font-size: 18px;
  text-align: center;
}
.save {
  transition: all 1s ease;
}
.xiao-enter {
  opacity: 0;
}
.xiao-leave-to {
  opacity: 0;
}
</style>